<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>客户信息列表</title>
    <!--引入element-ui-->
    <link rel="stylesheet" href="/resources/element-ui/lib/theme-chalk/index.css">
    <!--引入vue-->
    <script type="text/javascript" src="/resources/js/vue.js"></script>
    <script type="text/javascript" src="/resources/element-ui/lib/index.js"></script>
    <!--引入axios-->
    <script type="text/javascript" src="/resources/js/axios.min.js"></script>
</head>

<body>
<div id="app">
    <!--顶部菜单：添加、批量删除、搜索-->
    <el-row type="flex" justify="space-between" style="text-align: center">
        <el-col :span="20">
            <el-form :inline="true" size="small">
                <el-form-item>
                    <el-input v-model="searchFormData.username" prefix-icon="el-icon-user"
                              placeholder="请输入客户姓名"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="searchFormData.tel" prefix-icon="el-icon-mobile-phone"
                              placeholder="请输入手机号"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-select placeholder="请选择部门" v-model="searchFormData.deptName">
                        <el-option   v-for="(item,index) in deptList" :label="item.name"
                                     :value="item.name"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item>
                    <el-radio-group v-model="searchFormData.sex">
                        <el-radio :label="1">男</el-radio>
                        <el-radio :label="0">女</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="searchUsers">搜索</el-button>
                </el-form-item>
            </el-form>
        </el-col>
    </el-row>

    <!--在顶部工具栏和表格之间添加间隙-->
    <div style="margin: 5px"></div>
    <!--数据表格展示-->
    <!--userList包含了数据库user表里面的全部数据-->
    <el-table :data="userList" border>
        <!--type属性表示该值不是来至于数据库表的字段-->
        <el-table-column label="序号"  align="center" type="index"></el-table-column>
        <!--prop属性表示该值来至于数据库表里面的字段-->
        <el-table-column label="主键"  align="center" prop="id"></el-table-column>
        <el-table-column label="客户姓名"  align="center" prop="username"></el-table-column>
        <el-table-column label="生日"  align="center" prop="birthday"></el-table-column>
        <!--使用formatter来对表里面的数据进行格式化处理-->
        <el-table-column label="性别"  align="center" prop="sex" :formatter="sexFmt"></el-table-column>
        <el-table-column label="电话"  align="center" prop="tel"></el-table-column>
        <el-table-column label="薪资(元)"  align="center" prop="sal" :formatter="salFmt"></el-table-column>
        <el-table-column label="职业"  align="center" prop="profession" :formatter="professionFmt"></el-table-column>
        <el-table-column label="员工住址"  align="center" prop="address"></el-table-column>
        <!--是想要获取到全部数据里面的remark这个字段里面的数据-->
        <!--不能使用userList.xxx.xx的方式，原因是该写法是后端代码的写法-->
        <!--前端需要使用scope来表示全部数据，通过scope.row来获取到当前那一行的值  通过scope.row.remark获取到当前行里面remark属性的值-->
        <el-table-column label="备注"  align="center" prop="remark">
            <template slot-scope="scope">
                {{scope.row.remark==null || scope.row.remark==''?'暂无信息':scope.row.remark}}
            </template>
        </el-table-column>
        <el-table-column label="部门名称"  align="center" prop="name"></el-table-column>
        <el-table-column label="部门地址"  align="center" prop="loc"></el-table-column>
    </el-table>
    <!--分页-->
    <el-pagination
            :total="total"
            :current-page="pageNum"
            :page-size="pageSize"
            :page-sizes="pageSizes"
            @current-change="currentChange"
            @size-change="sizeChange"
            background
            layout="total,sizes,prev,pager,next,jumper"
    >
    </el-pagination>
</div>

<!--引入自定义js-->
<script type="text/javascript" src="/resources/js/search/getSearchs.js"></script>
</body>
</html>